<template>
	<view class="u-p-28">
		<view class="header bg-white">

			<view class="avatar">
				<u-image shape="circle" width="156rpx" height="156rpx" :src="userInfo.avatar">
				</u-image>
			</view>

			<view class="u-font-16 color-3 u-m-t-24 u-m-b-34" v-if="!access_token" @click="login">
				立即登录
			</view>

			<view v-else style="width:50%" class="u-font-16 color-3 u-m-t-24 u-m-b-34 u-line-1 u-text-center">
				{{userInfo.nickname}}
			</view>

			<view class="u-flex u-row-between color-80 u-font-14">
				<view class="u-m-r-80">
					ID：{{userInfo.uid || '-'}}
				</view>
				<view @click="goEditInfo" class="u-flex">
					<text class="u-m-r-12">编辑个人信息</text>
					<u-icon name="zhuanfa"></u-icon>
				</view>

			</view>
		</view>


		<view class="u-flex u-row-between u-m-t-20 bg-white u-m-b-20 action u-p-40 border-r-6">
			<view @click="goMessage" class="u-rela">
				<u-badge :is-center="true" type="error" :count="userInfo.message_unread"></u-badge>
				<u-image width="28px" height="28px" src="@/static/my/notice.png"></u-image>
				<view class="u-m-t-16 color-3 u-font-14">通知</view>
			</view>
			<view @click="goPost" class="u-rela">
				<u-badge :is-center="true" type="error" :count="userInfo.post_comment_unread"></u-badge>
				<u-image width="28px" height="28px" src="@/static/my/message.png"></u-image>
				<view class="u-m-t-16 color-3 u-font-14">帖子</view>
			</view>
			<view @click="goGet">
				<u-image width="28px" height="28px" src="@/static/my/get.png"></u-image>
				<view class="u-m-t-16 color-3 u-font-14">领养</view>
			</view>
			<view @click="goPublish">
				<u-image width="28px" height="28px" src="@/static/my/publish.png"></u-image>
				<view class="u-m-t-16 color-3 u-font-14">发布</view>
			</view>
		</view>

		<view class="u-m-b-20">

			<u-cell-group :border="false">
				<u-cell-item @click="goMore(item)" v-for="(item,index) in myMenuList" :key="index" :title="item.title">
					<view slot="icon" class="u-m-r-26">
						<u-image width="22px" height="22px" :src="item.icon"></u-image>
					</view>
				</u-cell-item>
				<u-cell-item @click="goWebView" :border-bottom="false" title="关注服务号">
					<view slot="icon" class="u-m-r-26">
						<u-image width="22px" height="22px" src="@/static/my/attention.png"></u-image>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 		<official-account bindload="bindload" binderror="binderror">
		</official-account> -->

		<u-tabbar :list="tabBar" active-color="#FFCF0B" inactive-color="#808080" :border-top="false"></u-tabbar>
	</view>
</template>

<script>
	import {
		myMenuList,
		tabBar
	} from '@/const';
	import {
		login,
		getUserInfo
	} from '@/api/user';
	import {
		getIcons
	} from '@/api/common'
	export default {
		data() {
			return {
				userInfo: {
					uid: '',
					nickname: '',
					avatar: '',
					message_unread: 0,
					post_comment_unread: 0,
				},
				access_token: '',
				myMenuList,
				tabBar,
			}
		},
		onShow() {
			this.access_token = uni.getStorageSync('access_token');
			this.getIcons();
			if (this.access_token) {
				this.getUserInfo();
			}
		},
		methods: {
			async getIcons() {
				const res = await getIcons();
				this.userInfo.avatar = res.data.default_avatar;
			},
			goWebView() {
				const url =
					'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUyOTY1ODcyNw==&scene=124#wechat_redirect';
				uni.navigateTo({
					url: '/pagesIndex/webView/webView?url=' + url,
				});
			},
			login() {
				let code;
				// 获取code
				uni.login({
					provider: 'weixin',
					success: (res) => {
						code = res.code;
					}
				})
				if (uni.getUserProfile) {
					// 获取用户信息
					uni.getUserProfile({
						desc: '登录',
						lang: 'zh_CN',
						success: async (info) => {
							// 调用后端登录接口
							const sub = await login({
								code,
								iv: info.iv,
								encryptedData: info.encryptedData
							});
							this.access_token = sub.data.access_token;
							uni.setStorageSync('access_token', sub.data.access_token);
							// 调用后端接口获取用户信息
							this.getUserInfo();
						},
						fail(err) {
							console.log('err', err)
						}
					})
				}
			},
			async getUserInfo() {
				const res = await getUserInfo();
				this.userInfo = res.data;
				const count = res.data.message_unread;
				this.tabBar = tabBar.map((item, index) => {
					if (index === 3) {
						item.count = count;
					}
					return item;
				})
			},
			validateLogin() {
				if (!this.access_token) {
					this.login();
					return false;
				} else {
					return true;
				}
			},
			goEditInfo() {
				if (this.validateLogin()) {
					uni.navigateTo({
						url: '/pagesMy/editInfo/editInfo'
					})
				}

			},
			goMessage() {
				if (this.validateLogin()) {
					uni.navigateTo({
						url: '/pagesMy/message/message'
					})
				}
			},
			goPost() {
				if (this.validateLogin()) {
					uni.navigateTo({
						url: '/pagesMy/post/post'
					})
				}

			},
			goGet() {
				if (this.validateLogin()) {
					uni.navigateTo({
						url: '/pagesMy/get/get'
					})
				}
			},
			goPublish() {
				if (this.validateLogin()) {
					uni.navigateTo({
						url: '/pagesMy/publish/publish'
					})
				}
			},
			goMore(item) {
				const name = item.name ? '?name=' + item.name : '';
				if (this.validateLogin()) {
					uni.navigateTo({
						url: item.page + name
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-top: 68rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		border-radius: 6px;

		.avatar {
			margin-top: -120rpx;
		}
	}
</style>
